<template>
  <div class="table">
    <div class="content-common">
      <div class="search-top">
        <el-form :label-position="'top'" :inline="true" :model="query">
          <el-form-item label="请假时间:" style="width: 223px">
            <el-date-picker
              v-model="query.time"
              type="daterange"
              align="center"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :picker-options="pickerOptions"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="测站">
            <el-input v-model="query.stnm" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item label="请假类型" style="width: 103px">
            <el-select v-model="query.leaveType" filterable clearable placeholder="请选择" :disabled="isView">
              <el-option v-for="item in leaveTypeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="审批状态">
            <el-select style="width: 103px" v-model="query.approveStatus" filterable clearable placeholder="请选择" :disabled="isView">
              <el-option v-for="item in approveStatusList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="监测时间">
            <el-input v-model="query.observer" placeholder="监测时间"></el-input>
          </el-form-item> -->
          <el-form-item class="search-btn">
            <el-button
              class="table-btn-blur"
              @click="
                page.currentPage = 1;
                getData();
              "
              >查询</el-button
            >
          </el-form-item>
        </el-form>

        <div class="right-search" style="margin-top: 12px">
          <el-button type="primary" icon="download" @click="handlerExcelDownLoad">请假导出</el-button>
          <el-button class="table-btn-blur" @click="handleAdd()">新增</el-button>
        </div>
      </div>
      <el-table :data="tableData" border class="table-common" header-cell-class-name="table-header">
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column align="center" prop="userName" label="姓名">
          <template #default="scope">
            <span class="titleLink" @click="handleViewDetail(scope.row)">{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="stnm" label="测站" width="280"></el-table-column>
        <el-table-column align="center" prop="location" label="地点"> </el-table-column>
        <el-table-column align="center" prop="leaveDays" label="请假天数"> </el-table-column>
        <el-table-column align="center" prop="beginDate" label="开始时间"></el-table-column>
        <el-table-column align="center" prop="endDate" label="结束时间"></el-table-column>
        <el-table-column align="center" prop="leaveType" label="请假类型">
          <template #default="scope">
            <span v-if="scope.row.leaveType === 1">事假</span>
            <span v-if="scope.row.leaveType === 2">病假</span>
            <span v-if="scope.row.leaveType === 3">婚假</span>
            <span v-if="scope.row.leaveType === 4">丧假</span>
            <span v-if="scope.row.leaveType === 5">年假</span>
            <span v-if="scope.row.leaveType === 6">产假/陪产假</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="stType" label="测站类型">
          <template #default="scope">
            <span v-if="scope.row.stType === 1">坡面径流场</span>
            <span v-if="scope.row.stType === 2">小流域控制站</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="approveStatus" label="状态">
          <template #default="scope">
            <span v-if="scope.row.approveStatus === '00'">未提交</span>
            <span v-if="scope.row.approveStatus === '01'">待审批</span>
            <span v-if="scope.row.approveStatus === '10'">已驳回</span>
            <span v-if="scope.row.approveStatus === '11'">已通过</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300" align="center">
          <template #default="scope">
            <el-button
              type="warning"
              class="table-btn-blur"
              v-if="(scope.row.approveStatus === '00' || scope.row.approveStatus === '10') && userCode == scope.row.userCode"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="warning"
              class="table-btn-success"
              v-if="(scope.row.approveStatus === '00' || scope.row.approveStatus === '10') && userCode == scope.row.userCode"
              @click="handleSubmit(scope.row)"
              >提交</el-button
            >
            <el-button type="warning" class="table-btn-success" v-if="scope.row.approveStatus === '01' && isCheckdata && stcdList.indexOf(scope.row.stnm) > -1" @click="handleExamine(scope.row)"
              >审批</el-button
            >
            <el-button type="warning" class="table-btn-warning" v-if="scope.row.approveStatus === '01' && userCode == scope.row.userCode" @click="handleReturn(scope.row)">撤回</el-button>
            <el-button
              type="danger"
              class="table-btn-delete"
              v-if="(scope.row.approveStatus === '00' || scope.row.approveStatus === '10') && userCode == scope.row.userCode"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end" style="margin-top: 20px">
        <el-pagination background v-model:currentPage="page.currentPage" @current-change="getData" layout="prev,total, pager, next" :total="page.totalSize"> </el-pagination>
      </el-row>
      <!-- 编辑弹出框 -->
      <el-dialog class="dialog_add_form" :title="logTitle" v-model="dialogMes.show" width="744px" v-if="dialogMes.show" :close-on-click-modal="false">
        <addForm :query="dialogMes.query" @close="closeDialog"></addForm>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import addForm from './addform.vue';
import {
  sysdictviewlistDictItem,
  viewPageStationInfo,
  pageLeaveApply, //分页查询
  delLeaveApply, //删除请假申请
  revokeLeaveApply, //撤回请假申请
  submitLeaveApply, //提交请假申请
  exportTripApply //导出打卡记录列表
} from '../../../api/index';
import moment from 'moment';
export default {
  name: 'zhengbianguancao',
  components: {
    addForm
  },
  data() {
    return {
      globalUser: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      query: {
        stnm: '',
        time: [],
        approveStatus: '',
        leaveType: ''
      },
      formInline: {},
      tableData: [],
      logTitle: '',
      pageTotal: 0,
      stationData: [],
      checkArr: [],
      tijiaoform: {
        status: 1
      },
      isView: false,
      dialogMes: {
        show: false,
        query: {}
      },
      userCode: JSON.parse(sessionStorage.getItem('userInfo')).userNo,
      isCheckdata: false, //roleNoList中包含JS-00000007为审批人员
      stcdList: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      approveStatusList: [
        { label: '未提交', value: '00' },
        { label: '待审批', value: '01' },
        { label: '已驳回', value: '10' },
        { label: '已通过', value: '11' }
      ],
      leaveTypeList: [
        { label: '事假', value: 1 },
        { label: '病假', value: 2 },
        { label: '婚假', value: 3 },
        { label: '丧假', value: 4 },
        { label: '年假', value: 5 },
        { label: '产假/陪产假', value: 6 }
      ]
    };
  },
  created() {
    let roleCode = JSON.parse(sessionStorage.getItem('userInfo')).roleNoList.join(',');
    if (roleCode.indexOf('JS-00000007') > -1) {
      this.isCheckdata = true;
    } else {
      this.isCheckdata = false;
    }
    let arr = [];
    let stcdList = JSON.parse(sessionStorage.getItem('userInfo')).stcdList;
    for (let i in stcdList) {
      arr.push(stcdList[i].stnm);
    }
    this.stcdList = arr.join(',');
    this.globalUser = globalUser;
    let that = this;
    this.query.year = globalyear;
    that.getData();
    this.getstationData();
    this.getchecktype();
  },
  methods: {
    closeDialog() {
      this.dialogMes = {
        show: false,
        query: {}
      };
      this.getData();
    },
    getchecktype() {
      let that = this;
      sysdictviewlistDictItem({
        dictCode: 'ZD-000004'
      })
        .then((e) => {
          that.checkArr = e.object;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getstationData() {
      let data = {
        currentPage: 1,
        pageSize: 1000
      };
      viewPageStationInfo(data).then((res) => {
        this.stationData = res.object.dataList.filter((item) => {
          return item.stType == systype;
        });
      });
    },
    //导出
    async handlerExcelDownLoad() {
      let url = globalVar.xiaoliuyubaseURL + '/soilWater/manage/leave/export/exportLeaveApply';
      var options = {
        url: url,
        method: 'post',
        responseType: 'blob',
        headers: {
          Authorization: sessionStorage.getItem('token')
        }
      };
      axios(options).then((res) => {
        if (res) {
          const link = document.createElement('a');
          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); //生成blob对象
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          const fileName = '请假申请记录表';
          link.setAttribute('download', `${fileName}` + '.xlsx'); //下载的文件名以及文件格式
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } else {
          console.log('下载失败');
        }
      });
    },

    getData() {
      let beginDate = '';
      let endDate = '';
      if (this.query.time) {
        beginDate = this.query.time[0];
        endDate = this.query.time[1];
      }
      let data = {
        currentPage: this.page.currentPage,
        pageSize: 10,
        stnm: this.query.stnm || '',
        beginDate: beginDate || '',
        endDate: endDate || '',
        approveStatus: this.query.approveStatus || '',
        leaveType: this.query.leaveType || ''
      };
      pageLeaveApply(data).then((res) => {
        this.tableData = res.object.dataList;

        this.page = res.object.page;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.getData();
    },
    // 删除操作
    handleDelete(row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          delLeaveApply({
            id: row.id
          }).then((e) => {
            this.$message.success('删除成功');
            this.getData();
          });
        })
        .catch(() => {});
    },
    //撤回请假申请
    handleReturn(row) {
      this.$confirm('确定要撤回该条申请吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          revokeLeaveApply({
            id: row.id
          }).then((e) => {
            this.$message.success('撤回成功');
            this.getData();
          });
        })
        .catch(() => {});
    },
    //提交请假申请
    handleSubmit(row) {
      this.$confirm('确定要提交该条申请吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          submitLeaveApply({
            id: row.id
          }).then((e) => {
            this.$message.success('提交成功');
            this.getData();
          });
        })
        .catch(() => {});
    },

    // 编辑操作
    handleEdit(row) {
      this.logTitle = '编辑请假申请';
      this.dialogMes = {
        show: true,
        query: {
          type: 'edit',
          ...row
        }
      };
    },
    //新增
    handleAdd() {
      this.logTitle = '新增请假申请';
      this.dialogMes = {
        show: true,
        query: {
          type: 'add'
        }
      };
    },
    //查看
    handleViewDetail(row) {
      this.logTitle = '查看请假申请';
      this.dialogMes = {
        show: true,
        query: {
          type: 'view',
          ...row
        }
      };
    },
    //审批
    handleExamine(row) {
      this.logTitle = '审核请假申请';
      this.dialogMes = {
        show: true,
        query: {
          type: 'shenpi',
          ...row
        }
      };
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.table-btn-blur {
  background: #3f8cff !important;
  border: 1px solid #3f8cff !important;
  border-radius: 2px;
  color: #fff !important;
}
.table-btn-success {
  background: #00b600 !important;
  border: 1px solid #00b600 !important;
  border-radius: 2px;
  color: #fff !important;
}
.table-btn-plain {
  background: #fff !important;
  border: 1px solid #3f8cff !important;
  border-radius: 2px;
  color: #3f8cff !important;
  font-size: 14px;
}
.table-btn-warning {
  background: #ff842f !important;
  border: 1px solid #ff842f !important;
  border-radius: 2px;
  color: #fff !important;
}
.table-btn-delete {
  background: #ff544e !important;
  border: 1px solid #ff544e !important;
  border-radius: 2px;
  color: #fff !important;
}
.titleLink {
  color: #3f8cff;
  cursor: pointer;
}

.titleLink:hover {
  text-decoration: underline;
}
.search-btn {
  margin-top: 30px;
  width: auto !important;
}
</style>

